﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账号管理</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=317"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">账号名称:</label>
                        <div class="layui-input-inline">
                            <input name="search" class="layui-input" placeholder="输入账号名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="searchBtn" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="tableField" lay-filter="tableField"></table>
        </div>
    </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="personalUser">
    <form id="personalUserForm" lay-filter="personalUserForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">用户账号</label>
                    <div class="layui-input-block">
                        <input name="account" placeholder="请输入英文账号"  class="layui-input"
                               lay-verType="tips" lay-verify="required" required />
                        <input hidden name="supId">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">账号类型:</label>
                    <div class="layui-input-block">
                        <input name="userType" type="radio" value="1" title="个人" checked/>
                    </div>
                </div>
                <div class="layui-form-item"><label class="layui-form-label layui-form-required">所属企业</label>
                    <div class="layui-input-block">
                        <input name="supplierId" class="layui-input" id="cascader">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">用户姓名:</label>
                    <div class="layui-input-block">
                        <input name="trustName" placeholder="请输入" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">用户手机:</label>
                    <div class="layui-input-block">
                        <input name="trustPhone" placeholder="请输入用户使用手机" class="layui-input" lay-verify="phone"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">用户身份证:</label>
                    <div class="layui-input-block">
                        <input name="identityNum" placeholder="请输入身份证号" class="layui-input" lay-verify="identity"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="addAccountBtn" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="singTextDialog">
    <form id="signTextForm" lay-filter="contractForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-form-item">
                <label class="layui-form-label">印章文本</label>
                <div class="layui-input-block">
                    <input name="text" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字体名称</label>
                <div class="layui-input-block">
                    <select name="fontName">
                        <option value="SimHei">黑体</option>
                        <option value="SimSun">宋体</option>
                        <option value="SimKai">楷体</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字体</label>
                <div class="layui-input-block">
                    <input name="fontSize" type="number" value="30" class="layui-input"
                           placeholder="字体大小 20~120，默认30，"/>

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字体颜色</label>
                <div class="layui-input-block">
                    <select name="fontColor">
                        <option value="red">红</option>
                        <option value="black">黑</option>
                        <option value="blue">蓝</option>
                        <option value="purple">紫</option>
                        <option value="grey">灰</option>
                        <option value="brown">棕</option>
                        <option value="tan">褐</option>
                        <option value="cyan">青</option>
                    </select>
                </div>
            </div>

        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="signTextBtnSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="signImgDialog">
    <form id="contractForm" lay-filter="contractForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">上传印章</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="upload">选择印章</button>
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">印章名称</label>
                <div class="layui-input-block">
                    <input name="imageName" class="layui-input" lay-verify="required" id="imageName"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <a class="layui-btn" id="action" lay-submit>保存</a>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="importAccountDialog">
    <form id="importAccountForm" lay-filter="importAccountForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-form-item"><label class="layui-form-label layui-form-required">导入</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="upload">选择导入的供应商</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" id="action" lay-submit>保存</a>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<script type="text/html" id="trustPersonForm">
    <form lay-filter="trustPersonForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <input hidden name="accountId">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">使用人</label>
            <div class="layui-input-block">
                <input name="trustName" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">手机</label>
            <div class="layui-input-block">
                <input name="trustPhone" lay-verify="phone" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" lay-filter="submit" lay-submit>保存</a>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
<!-- 表格操作列 -->
<script type="text/html" id="userTbBar">
    {{d.userType==2?
    '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="createSign">生成印章</a>':''
    }}
    {{d.userType==1?'
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改信息</a>
    ':''}}
    {{d.userType==2?'
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editTrust">修改使用人</a>
    ':''}}
    {{d.userType==2?'
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="upload">上传印章</a>
    ':''}}
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="remove">删除账号</a>
    <!--<a class="layui-btn layui-btn-normal layui-btn-xs" data-dropdown="#userTbDrop{{d.LAY_INDEX}}" no-shade="true">-->
        <!--更多<i class="layui-icon layui-icon-drop" style="font-size: 12px;margin-right: 0;"></i></a>-->
    <!--&lt;!&ndash; 下拉菜单 &ndash;&gt;-->
    <!--<ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="userTbDrop{{d.LAY_INDEX}}">-->
        <!--<div class="dropdown-anchor"></div>-->

    <!--</ul>-->
</script>
<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload', 'dropdown', 'cascader'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var upload = layui.upload;
        var dropdown = layui.dropdown;
        var cascader = layui.cascader;
        var supplier = doPostSync('/contract/supplier/queryAllSupplier', {}).obj;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#tableField',
            url: '/contract/contractUser/queryContractUserList',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="addPersonal" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加个人账号</button>&nbsp;',
                // '<button lay-event="addEnt" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>导入企业账号</button>',
                '</p>'].join(''),
            method: 'post',
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            cols: [[
                {type: 'numbers'},
                {field: 'account', title: '账号',width :200},
                {
                    field: 'userType',width :100, title: '账号类型', templet(row) {
                        return row.userType == 1 ? '个人' : (row.userType == 2 ? '企业' : '未知类型')
                    }
                },
                {
                    field: 'trustName', title: '使用人',width :100,  templet(row) {
                        return row.trustName ? row.trustName : row.name
                    }
                },
                {
                    field: 'trustPhone', title: '使用人手机',width :150, templet(row) {
                        return densnPhone(row.trustPhone?row.trustPhone:row.mobile)
                    }
                },
                {field: 'supplierName', title: '企业',width :200 },
                // {
                //     field: 'name', title: '法人', width :100, templet(row) {
                //         return row.name
                //     }
                // },
                {
                    field: 'registerFlag', width :100,title: '状态', templet(row) {
                        return row.registerFlag == 5 ? '已验证' : '未验证';
                    }
                },
                {title: '操作', toolbar: '#userTbBar', align: 'center', width: 400, fixed:'right'}
            ]],
            parseData: function (res) {
                res = res.obj;
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.total,
                    "data": res.rows
                }
            }
        });
        /* 表格搜索 */
        form.on('submit(searchBtn)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });
        /* 表格工具条点击事件 */
        table.on('tool(tableField)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data, obj.data.userType);
            } else if (obj.event === 'register') { // 注册用户
                doRegister(obj.data);
            } else if (obj.event === 'upload') { // 手动上传印章
                handleUpload(obj.data);
            } else if (obj.event === 'createSign') { // 系统生成印章
                handleSysSign(obj.data);
            } else if (obj.event === 'status') { // 获取供应商状态
                handleStatus(obj.data);
            } else if (obj.event == 'remove') {
                handleRemove(obj.data);
            } else if (obj.event === 'editTrust') {
                handleUpdateTrustPerson(obj.data);
            }
            dropdown.hideAll();
        });
        /* 表格头工具栏点击事件 */
        table.on('toolbar(tableField)', function (obj) {
            if (obj.event === 'addPersonal') { // 添加
                showEditModel(obj.data, 1);
            } else if (obj.event === 'addEnt') {
                openImportAccountModal(obj.data, 2)
            }
        });

        function handleRemove(row) {
            layer.confirm('删除账号后不可恢复，确认删除?', function () {
                $.post('/contract/contractUser/removeAccount', {account: row.account}, function (res) {
                    closeDialog();
                    if (res.code == 200) {
                        insTb.reload({page: {curr: 1}});
                        showAlert(res.msg, 1)
                    } else {
                        showAlert(res.msg);
                    }
                })
            })
        }

        /**更新使用人信息*/
        function handleUpdateTrustPerson(row) {
            admin.open({
                type: 1,
                content: $("#trustPersonForm").html(),
                success: function () {
                    form.val('trustPersonForm', row)
                    form.on('submit(submit)', function (data) {

                        $.post('/contract/contract/updateTrustPerson', data.field, function (res) {
                            closeDialog()
                            if (res.code == 200) {
                                insTb.reload({page: {curr: 1}});
                                showAlert(res.msg, 1)
                            } else {
                                showAlert(res.msg)
                            }
                        })
                    })

                }
            })
        }

        /* 显示表单弹窗 */
        function showEditModel(mData, type) {
            admin.open({
                type: 1,
                content: type == 1 ? $('#personalUser').html() : $("#enterpriseUser").html(),
                area: ['60%', '80%'],
                success: function (layero, dIndex) {
                    form.render();
                    form.val(type == 1 ? 'personalUserForm' : 'enterpriseUserForm', mData);
                    if(mData){
                        //给指定属性添加disabled
                       wrapFormAddDisabled(['account'])
                    }
                    if (mData) {
                        cascader.render({
                            elem: '#cascader',
                            data: supplier,
                            filterable: true,
                            value: mData.supplierId,
                        });
                    } else {
                        cascader.render({
                            elem: '#cascader',
                            filterable: true,
                            data: supplier,
                        });
                    }
                    // 表单提交事件
                    form.on('submit(addAccountBtn)', function (data) {
                        var loadIndex = layer.load(2);
                        var supplierName = "";
                        supplier.forEach(item => {
                            if (item.value == data.field.supplierId) {
                                supplierName = item.label;
                            }
                        });
                        data.field.supplierName = supplierName;
                        $.post(mData ? '/contract/contract/updateContractUser' : '/contract/contract/addContractUser', data.field, function (res) {
                            layer.close(loadIndex);
                            if (200 === res.code) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                }
            });
        }

        function handleSysSign(row) {
            layer.confirm('是否生成系统印章', function () {
                if (row.userType == 1) {
                    row.text = row.trustName?row.trustName:'';
                } else {
                    row.text = row.supplierName;
                }
                $.post('/contract/contract/createSign', row, function (res) {
                    closeDialog();
                    if (200 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
                return false;
            })
        }

        function handleUpload(field) {
            admin.open({
                type: 1,
                content: $('#signImgDialog').html(),
                success: function (layero, dIndex) {
                    var loadIns;
                    upload.render({
                        elem: '#upload'
                        , accept: 'file'
                        , url: '/contract/contract/uploadSign' //上传文件
                        , bindAction: '#action'
                        , auto: false
                        , before: function () {
                            loadIns = layer.load(2);
                            this.data = {account: field.account, imageName: $("[name='imageName']").val()};
                        }
                        , done: function (res) {
                            closeDialog();
                            if (res.code == 200) {
                                showAlert('上传成功', 1);
                                insTb.reload({page: {curr: 1}});
                            } else {
                                //显示异常
                                showAlert(res.msg);
                            }
                            return false;
                        }
                    });
                }
            });
        }

        function openImportAccountModal(field) {
            admin.open({
                type: 1,
                content: $('#importAccountDialog').html(),
                success: function (layero, dIndex) {
                    var loadIns;
                    upload.render({
                        elem: '#upload'
                        , accept: 'file'
                        , url: '/contract/contract/importSysAccount' //上传文件
                        , bindAction: '#action'
                        , auto: false
                        , before: function () {
                            loadIns = layer.load(2);
                        }
                        , done: function (res) {
                            closeDialog();
                            if (res.code == 200) {
                                showAlert(res.msg, 1);
                                insTb.reload({page: {curr: 1}});
                            } else {
                                //显示异常
                                showAlert(res.msg);
                            }
                            return false;
                        }
                    });
                }
            });
        }

        function handleStatus(field) {
            if (!field.taskId) {
                showAlert('请先点击注册，然后更新状态！！');
                return false;
            }
            $.post('/contract/contract/approveStatus', field, function (res) {
                if (res.code == 200) {
                    insTb.reload({where: field, page: {curr: 1}});
                    showAlert(res.msg, 1);
                } else {
                    showAlert(res.msg);
                }
            })
        }

        function doRegister(row) {
            var loadIns = layer.load(2);
            $.post('/contract/contract/register', {account: row.account, taskId: row.taskId}, function (res) {
                layer.close(loadIns)
                if (res.code == 200) {
                    showAlert(res.msg, 1);
                    insTb.reload({where: row, page: {curr: 1}});
                } else {
                    showAlert(res.msg, 2)
                }
            });
        }
    });
</script>
</body>
</html>
